<template>
  <div>
    <a-card title="新增销售订单">
      <a-form layout="inline">
        <a-form-item label="选择客户" required="true" v-bind="validateInfos.customerId">
          <customer-selection ref="csRef" :preload="true" @customerSelected="customerSelected" />
        </a-form-item>
        <a-form-item label="发生日期" v-bind="validateInfos.occurredAt">
          <a-date-picker v-model:value="newSaleOrderParam.occurredAt" valueFormat="YYYY-MM-DD" />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
          <a-button type="primary" @click="add">确定</a-button>
        </a-form-item>
        <a-form-item>
          <a-button style="margin-left: 30px" @click="resetFields">重置</a-button>
        </a-form-item>
      </a-form>
      <a-divider />
      <a-tabs type="card">
        <a-tab-pane key="1" tab="商品列表">
          <a-row>
            <a-col>
              <a-space>
                <a-button type="link" @click="addNewProductRow">添加商品</a-button>
              </a-space>
            </a-col>
          </a-row>
          <a-table :columns="productColumns" :data-source="newSaleOrderParam.items" rowKey="key">
            <template #productId="{ text, record }">
              <div>
                <a-select
                  v-model:value="record.productId"
                  show-search
                  style="width: 200px; margin: -5px 0"
                  placeholder="请搜索商品"
                  @search="handleSearch"
                  @change="handleChange"
                >
                  <a-select-option v-for="p in productData" :key="p.uid">
                    <span> {{ p.name }}</span>
                    <span style="margin-left: 5px; color: #bbbbbb">{{ p.brand.name }}</span>
                  </a-select-option>
                </a-select>
              </div>
            </template>
            <template #unitId="{ text, record }">
              <div>
                <a-select
                  v-model:value="record.unitId"
                  show-search
                  style="width: 200px; margin: -5px 0"
                  placeholder="请选择单位"
                >
                  <!--                      <a-select-option value="-1">选择商品</a-select-option>-->
                  <a-select-option v-for="p in productUnitData" :key="p.unitId">
                    {{ p.unit.name }}
                  </a-select-option>
                </a-select>
              </div>
            </template>
            <template #price="{ text, record }">
              <div>
                <a-input v-model:value="record.price" style="margin: -5px 0" />
              </div>
            </template>
            <template #quantity="{ text, record }">
              <div>
                <a-input v-model:value="record.quantity" style="margin: -5px 0" />
              </div>
            </template>
            <template #action="{ text, record }">
              <a-button type="link" @click="removeItem(record.key)">删除</a-button>
            </template>
            <!--            <template #footer>-->
            <!--              <a-button type="link" @click="addNewProductRow">添加商品</a-button>-->
            <!--            </template>-->
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import CustomerSelection from '@/components/chunfeng/customer/CustomerSelection.vue'

import { useOrderAddFunctions } from '@/views/sale/order/add/addFunctions'

export default defineComponent({
  name: 'SaleOrderAdd',
  components: { CustomerSelection },
  setup() {
    const {
      customerSelected,
      newSaleOrderParam,
      add,
      addNewProductRow,
      handleChange,
      handleSearch,
      layout,
      resetFields,
      validateInfos,
      productColumns,
      productData,
      productUnitData,
      removeItem,
      csRef,
    } = useOrderAddFunctions()

    return {
      newSaleOrderParam,
      validateInfos,
      layout,
      add,
      resetFields,
      productColumns,
      addNewProductRow,
      productData,
      productUnitData,
      handleSearch,
      handleChange,
      customerSelected,
      removeItem,
      csRef,
    }
  },
})
</script>
